import React from 'react'
import {Toast} from 'antd-mobile'
import {get} from '../../axios'
import utils from '../../common/utils'
import history from '../../history'
import moment from 'moment'

export default class Archive extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            projects: [],
            category: {},
            user: {}
        }
    }

    componentDidMount() {
        let category_id = this.props.match.params.category_id
        this.get_user_info()
        this.get_category(category_id)
        this.get_archive(category_id)
    }

    get_archive(category_id) {
        get(`mem/project?category=${category_id}`).then(resp=>{
            if (resp&&resp.current_page) {
                this.setState({projects: resp.data})
            } else {
                Toast.fail('加载失败')
            }
        })
    }

    get_category(category_id) {
        get(`mem/project-category/${category_id}`).then(resp=>{
            if (resp&&resp.success) {
                this.setState({category: resp.data})
            } else {
                Toast.fail('加载失败')
            }
        })
    }

    get_user_info() {
        get(`mem/me`).then(resp=>{
            if (resp&&resp.success) {
                this.setState({user: resp.data})
            } 
        })
    }

    render() {
        const {projects, category, user} = this.state,
            _class = (x) => {
                switch (x.status) {
                    case 'done':
                        return 's2'
                    case 'publish':
                    case 'pending':
                        return ''
                    case 'working':
                        return 's1'    
                    default:
                        return ''
                }
            }
            
        return (
        <div className="archive">
            <div className="title">
                <span>{category.name}</span><i>{category.intro}</i>
                <a href="#">&gt;</a>
            </div>
            <div className="content">
            {
                this.state.projects.map(x => {
                    const url = utils.reslove_detail_url(x, user)
                     
                    return <dl className="clearfix" key={x.id} onClick={()=>history.push(url)}>
                            <dt className="col-xs-4"><a href="#"><img src="https://ceoja-1251886366.cos.ap-guangzhou.myqcloud.com/a1.jpg" /></a></dt>
                            <dd className="col-xs-8">
                                <div className="p1"><a href="#">{x.title}</a></div>
                                <div className="p2">
                                    <span class={_class(x)}>
                                        <em>{utils.formatProjectStatus(x)}</em>
                                        <i>{category.name}</i>
                                    </span>
                                    <label>{moment(x.created_at).format('YYYY-MM-DD hh:mm')}</label>
                                </div>
                            </dd>
                        </dl>
                }
                    
                )
            }              
            </div>
        </div>
        )
    }
}